<template>
  <div >
    <div class="con_wrap" v-img="qing">
        <div class="nowcity">
          {{weaRes.city_name}} <span>></span>
        </div>
        <div class="today">
          <div class="nowtem">{{weaRes.current_temperature}}℃</div>
          <div class="to_right">
               <div><span>{{weaRes.current_condition}}</span>  <span>{{weaRes.wind_direction}}{{weaRes.wind_level}}级</span></div>
              <div><span>{{weaRes.low_temperature}}℃-{{weaRes.high_temperature}}℃ </span> <span>{{weaRes.aqi}}{{weaRes.quality_level}}</span></div>
          </div>
        </div>
        <!-- 导航 -->
        <div class="hour_nav">
          <ul>
            <li @click="changeIndex(index)" :class="index==hindex?'active':''" v-for="(item,index) in hoursNav" :key="item.name">{{item.name}}</li>
          </ul>
        </div>
     
        <div id="myswper" >
            <swiper  ref="mySwiper"  :options="swiperOptions" >
               <swiper-slide>
                <!-- 封装组件 -->
                  <my-hours :hourly_forecast="hourly_forecast.slice(0,9)"></my-hours>
               </swiper-slide>
               <swiper-slide>
                
               </swiper-slide>
               <swiper-slide>
               
               </swiper-slide>
            </swiper>
        </div>
    </div>
  </div>
</template>

<script>
import myHours from './myHours.vue'
export default {
  name: '2209vueWeaContent',
  components:{myHours},
  data() {
    return {
      swiperOptions:{ //轮播图配置项
        loop:true,
        autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: false,
          }
      },
      hindex:0,
      hoursNav:[{
          name:"气温"
      },
      {
          name:"风力"
      },
       {
          name:"降水量"
      },
     {
          name:"紫外线"
      }],
      qing:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw%2Fc7801969-251d-4686-bab4-40c8a3d7bfcf%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1714716045&t=69ff05cf0cfeec96c4e40a15cbfab48c"
    };
  },
  props:{
    weaRes:{//整体天气
      type:Object,
      required:true,
      default(){
        return  {}
      }
    },
    hourly_forecast:{ //每小时
      type:Array,
       required:true,
      default(){
        return  []
      }
    },
    forecast_list:{ //未来15天
      type:Array,
        required:true,
       default(){
        return  []
      }
    }
  },
  directives:{
    img:{
      bind(){},
      inserted(el,bindding){
        el.style.background=`url(${bindding.value})`
      }
    }
  },
  mounted() {
    
  },

  methods: {
    changeIndex(index){
      this.hindex=index
    }
  },
};
</script>
<style lang="less">
*{
  margin: 0 ;
  padding: 0;
}
.con_wrap{
  width: 792px;
  height: 378px;
  margin: 20px auto;
  color:white;
  .nowcity{
    margin-left: 20px;
    font-size: 20px;
    span{
      font-family: "黑体";
      font-size: 30px;
      transform:rotate(90deg);
      display: inline-block;
      margin-top:5px;
    }
  }
}
.today{
  width:100%;
  margin-left: 30px;
  display: flex;
  margin-top: 30px;
  color: white;
  .nowtem{
    color:white;
    font-size: 35px;
  }
  .to_right{
    font-size: 20px;
    margin-left: 20px;
    span{
      margin-left: 10px;
    }
  }
}
.hour_nav{
margin-top: 20px;
  width: 100%;
  ul{
    width: 300px;
    display: flex;
    list-style: none;
    font-size: 20px;
    li{
      width: 90px;
      text-align: center;
      line-height: 40px;
      &.active{
        background: rgba(0,0,255,0.6);
      }
    }
  }
}

#myswper{
    width: 792px;
    height: 300px;
    background:skyblue;
    .swiper-slide{
      width:792px ;
      height: 300px;
      font-size: 200px;
    }
}

</style>